<template>
  <div class="sort">
    <div class="top">
      <div class="flex top_exp">
        <img
          style="width:280px;height:240px"
          src="../../../assets/images/sort_exp.jpg"
          alt="商品排序"
        >
        <div class="flex-1 warn-box">
          <p class="flex align-center">
            <svg-icon
              style="margin-right: 17px"
              icon-class="warn"
              :size="20"
            />
            <span style="font-size:16px">商品排序说明</span>
          </p>
          <p class="color-666" style="line-height:28px">
            1. 商品排序只显示正常上架的商品。<br />
            2. 店铺页面商品根据排序数值进行排序，数值越小商品展示位置越靠前。<br />
            3. 同数值排序时，添加时间越早商品展示位置越靠前。
          </p>
        </div>
      </div>
      <div class="common_form_search">
        <el-form
          ref="searchForm"
          :inline="true"
          :model="searchForm"
        >
          <el-form-item label="商品名称">
            <el-input
              v-model="searchForm.title"
              placeholder="请输入商品名称"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              size="small"
              type="primary"
              @click="search()"
            >搜索</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="list_content">
      <div class="flex align-center table-top-btns">
        <h5 class="flex align-center">
          <svg-icon
            style="margin-right:15px"
            icon-class="list"
            :size="15"
          />数据列表
        </h5>
        <p class="color-999">共查询<span class="red-font">{{total}}</span>个商品</p>
      </div>
      <el-table
        :data="tableData"
        border
        style="width: 100%"
      >
        <el-table-column
          align="center"
          label="排序"
          width="80"
        >
          <template slot-scope="scope">
            <span v-if="!$hasMethod('#sort')">{{scope.row.shop_sort}}</span>
            <el-input
              v-else
              oninput="value=value.replace(/[^\d]/g,'')"
              maxLength='9'
              v-model="scope.row.shop_sort"
              @change="changeSort(scope.row.id, scope.row.shop_sort)"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column
          prop="id"
          label="ID"
          width="70"
          align="center"
        />
        <el-table-column
          label="图片"
          width="90"
          align="center"
        >
          <template slot-scope="scope">
            <el-image
              style="width:50px; height:50px"
              :src="scope.row.imgurl?$globalObj.imgBaseUrl+scope.row.imgurl:''"
            >
              <div
                slot="error"
                class="image-slot"
              >
                <i class="el-icon-picture-outline"></i>
              </div>
            </el-image>
          </template>
        </el-table-column>
        <el-table-column
          prop="title"
          label="商品名称"
          align="center"
        />
        <el-table-column
          prop="name"
          label="商品分类"
          align="center"
        />
        <el-table-column
          prop="create_time"
          label="添加时间"
          align="center"
          width="100"
        />
        <el-table-column
          prop="status"
          label="状态"
          align="center"
        >
          <template slot-scope="scope">
            <el-tag :type="scope.row.status == 1 ? 'success' : scope.row.status == 3 ? 'warning' :'danger'">{{ scope.row.status == 1 ? "已上架" : scope.row.status == 2?"已下架":scope.row.status == 3?"申请下架":scope.row.status == 4?"申请下架拒绝":"违规下架" }}</el-tag>
          </template>
        </el-table-column>
      </el-table>
      <custom-page
        ref="customPage"
        :total="total"
        @getList="getList"
      ></custom-page>
    </div>
  </div>
</template>

<script>
import customPage from "@/components/customPage";
import { goodsSortList, editSort } from "@/api/shop";
export default {
  components: { customPage },
  data() {
    return {
      searchForm: {
        title: ''
      },
      tableData: [],
      total: 0
    }
  },
  methods: {
    // 更改排序
    changeSort(id, val) {
      editSort({
        type: 'Goods',
        id: id,
        sort: val
      }).then(res => {
        this.getList();
      })
    },
    search() {
      this.$refs.customPage.page = 1;
      this.getList();
    },
    getList() {
      const { page, pageSize } = this.$refs.customPage;
      goodsSortList({
        page,
        pageSize,
        ...this.searchForm
      }).then(res => {
        this.tableData = res.data || [];
        this.total = res.total;
      })
    }
  },
  mounted() {
    this.getList();
  }
}
</script>
<style lang="scss" scoped>
.top {
  padding: 20px 30px 0;
  border-bottom: 1px solid #eeeeee;
  .common_form_search {
    margin-top: 10px;
  }
}
</style>